<template>
	<aside v-if="param.student">
		<el-dialog	
			  class="mealfeeDialog"
			  :visible.sync="param.isshow"
			  :close-on-click-modal="param.modalclose"
			  :modal="false"
			  element-loading-background="rgba(0, 0, 0, 0.1)"
			  custom-class="mealfee"			  
			  >
			  <div class="title">{{mealsType==1?'购买餐费':'补交餐费'}}({{param.student.realName}})</div>
			  <div class="content-box">
			  	  <section>
			  	  	<div class="h-title">选择餐费</div>
			  	  	<div class="mealfee-list">
			  	  		<div class="tablecss">
		              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead >
				      				<tr>
				      					<th style="width:1rem;"></th>
				      					<th>名称</th>
				      					<th>单价(元/天)</th>
										<th>收费规则</th>
				      					<th>退费规则</th>				      					    					
				      				</tr>				      				
				      			</thead>
				      			<tbody  v-if="param.datameallist.length">
				      				<tr v-for="(li,index) in param.datameallist" :key="index">
				      					<td align="center">
											<el-checkbox v-model="li.ischeck" @change="selectcheck(li)"></el-checkbox>
											<!-- <el-radio v-model="mealsType" :label="index" @change="selectcheck(li)">{{li.name}}</el-radio> -->
										</td>
				      					<td align="center">{{li.name}}</td>
				      					<td align="center">￥{{li.salesPrice}}</td>
										<td align="center">{{li.chargeRule}}</td>
				      					<td align="center">{{li.refundRule}}</td>				      							      				      					
				      				</tr>	      				
				      			</tbody>
				      			<tbody  v-else>
					      				<tr>
					      					<td colspan="11" align="center">暂无数据</td>
					      				</tr>
					      		</tbody>
			      		    </table>
				      	</div>
			  	  	</div>
			  	  </section>
			      <section>
			      	<div class="h-title">购买结算</div>
			      	<div class="mealfee-list" style="border-bottom: none;border-bottom-right-radius: 0rem;border-bottom-left-radius: 0rem;">
			  	  		<div class="tablecss">
		              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead>
				      				<tr>				      					
				      					<th>名称</th>
				      					<th>{{mealsType==1?'购买月份':'补交月份'}}</th>
				      					<th>单价(元/天)</th>		
				      					<th>{{mealsType==1?'购买数量(天)':'补交数量(天)'}}</th>
				      					<th>合计金额</th>
				      					<th>应收金额</th>
				      					<th>操作</th>
				      				</tr>				      				
				      			</thead>
				      			<tbody  v-if="param.settlementlist.length>0">
				      				<tr v-for="li in param.settlementlist">				      					
				      					<td align="center">{{li.name}}</td>
				      					<td align="center">
											<!-- {{li.curmonth}} -->
											<el-cascader
												v-model="selectMonth"
												:collapse-tags="true"
												:props="{ multiple: true }"
												:options="allMonth"
												clearable
												@change="timeChange">
											</el-cascader>
										</td>
				      					<td align="center">￥{{li.salesPrice}}</td>
				      					<td align="center">{{li.quantity}}</td>
				      					<td align="center">￥{{li.totalmoney}}</td>
				      					<td align="center">￥{{li.amountReceivable}}</td>
				      					<td align="center"><a href="javascript:void(0);" @click="deletesettle(li)">删除</a></td>
				      				</tr>	      				
				      			</tbody>
				      			<tbody  v-else>
					      				<tr>
					      					<td colspan="11" align="center">暂无数据</td>
					      				</tr>
					      		</tbody>
			      		    </table>
				      	</div>
			  	  	</div>
			      </section>
			      <footer>
			      	<div class="total-box" style="">			      		
				      	<span>已选定{{param.settlementlist.length}}个商品</span>
				      	<span>&nbsp;</span>
				      	<span style="margin-left: 1.5rem;margin-right:0.3rem;">总计应收：￥{{sumMoney}}</span>
			      	</div>
			      </footer>
			  </div>
		      <div class="footer">
				<div class="btnCancel" @click="back">上一步</div>
				<div style="width:0.1rem;"></div>
				<div class="btnOk" @click="btnOkBuy" v-if="param.settlementlist.length>0">确定购买</div>
				<div class="btnOkDisabled" disabled v-else>确定购买</div>
		      </div>
		</el-dialog>
		
		<!--核算餐费金额-->
		<accountformeals ref="accountformeals" @backselect="param.isshow = true;" @suceess="updateProcessCenterMoneyList"></accountformeals>
	</aside>
</template>

<script>
	
	import accountformeals from "./accounting_for_meals"; //餐费核算
	let vm;
	export default{
		components:{
			accountformeals
		},
		data(){
			return {
				/**1-午餐；2-晚餐 */
				mealsType:1,
				/**购买月份 */
				allMonth:[],
				/**选择月份 */
				selectMonth:null,
				/**一个月默认22天 */
				oneMonthDays:22,
				param:{
					student:null,
					isshow:false,
					modalclose:false,					
					checked:false,
					datameallist:[],
					settlementlist:[]
				}
			}
		},
		methods:{
			/**
			 * 数据初始化
			 */
			init(data){
				this.mealsType=1;
				vm.param.student = data;
				vm.param.isshow = true;
				vm.selectMonth=[];
				vm.param.settlementlist = [];
				let user = tool.getItem(lsKey.user,true);
				let param = {					
					campusId:vm.$store.state.campusId,
				};
				
				//获取可购买餐费列表
				api.getAvailableMealsList(param).then(function(data){
					if(data.result=="操作成功"){	
						data.list.forEach(function(item) {
							if(item.type == 1) {
								item.chargeRule = "预收费";
							}
							if(item.type == 2) {
								item.chargeRule = "先记账，后结算";
							}
							if(item.refundRulesMode == 0) {
								item.refundRule = "不退费";
							}
							if(item.refundRulesMode == 1) {
								item.refundRule = "连续请假" + item.refundRulesDay + "天，退餐费";
							}
						});
						vm.param.datameallist = data.list;
						
						for(let i =0;i<vm.param.datameallist.length;i++){
							
							vm.param.datameallist[i].ischeck = false;	
							
						}								
					}					
				})
			},
			/**
			 * 更新购买月份
			 * @param type 类型 1-午餐；2-晚餐
			 * @param existData 已经购买的月份列表
			 */
			updateTimeList(type,existData=[]){
				let now=new Date();
				let year=now.getFullYear();
				let lastyear=year-1,nextyear=year+1;
				let list=[
					{label:lastyear+'年',value:lastyear,children:[],disabled:type==1},
					{label:year+'年',value:year,children:[]},
					{label:nextyear+'年',value:nextyear,children:[],disabled:type==2}
				];
				let monthMap=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
				let curMonth=now.getMonth();
				for(let i=0;i<12;i++){
					let m=monthMap[i];
					let mmm=i+1;mmm=mmm<10?('0'+mmm):mmm;
					//去年
					let timestr=lastyear+'-'+mmm;
					let disabled=existData.includes(timestr);
					// if(type==1)disabled=true;
					list[0].children.push({label:m,disabled: disabled,value:i+1});
					//今年
					timestr=year+'-'+mmm;
					disabled=existData.includes(timestr);
					if(type==1&&curMonth>i)disabled=true;
					if(type==2&&curMonth<=i)disabled=true;
					list[1].children.push({label:m,disabled: disabled,value:i+1});
					//明年
					timestr=nextyear+'-'+mmm;
					disabled=existData.includes(timestr);
					list[2].children.push({label:m,disabled: disabled,value:i+1});
				}
				this.allMonth=list;
			},
			/**
			 * 确定购买
			 */
			btnOkBuy(){
				
				
				let list = [];
				for(let i =0;i<vm.param.settlementlist.length;i++){
					let row = vm.param.settlementlist[i];
					// if(row.quantity>0)
					{
						list.push(tool.clone(row));
					}
				}
				if(vm.selectMonth.length<=0){
					vm.$message({
				            message: "请选择月份",
				            type: 'warning'
					});
					return;
				}
				if(list.length<=0){
					vm.$message({
				            message: "餐费购买数量不能为0",
				            type: 'warning'
					});
					return;
				}
				
				vm.param.isshow = false;
				list[0].buyMonth=vm.selectMonth;
				vm.$refs.accountformeals.init(this.mealsType,list,vm.param.student);
				
			},
			/**
			 * 返回
			 */
			back(){
				
				vm.param.settlementlist = [];
				vm.param.isshow = false;
				this.$emit('backselect');
			},
			/**
			 * 选中餐费
			 */
			selectcheck(li){
				if(li.ischeck)
					for(let i=0;i<vm.param.datameallist.length;i++){
						if(vm.param.datameallist[i].mealsId!=li.mealsId)
							vm.param.datameallist[i].ischeck = false;
					}
				this.mealsType=li.type;
				vm.selectMonth=[];
				// let curDate = new Date();
				// let month = curDate.getMonth()+1;
				// let curMonth = tool.DateToString(curDate,"yyyy-MM");			
				if(li.ischeck){//选中
				
					//获取学员指定餐项已经购买的月份
					api.getStudentBuyMonthForMeals({
						studentId:vm.param.student.studentId,
						mealsId:li.mealsId
					}).then(function(data){
						if(data.resultCode==2000){
							vm.updateTimeList(vm.mealsType,data.info);
						}	
						else{
							vm.$message({
								type:'warning',
								message:data.message||'操作失败！'
							});
						}
					});
					vm.param.settlementlist=[{
						mealsId:li.mealsId,
						name:li.name,
						// curmonth:month,
						salesPrice:li.salesPrice,
						quantity:0,
						totalmoney:0,
						amountReceivable:0,
						
					}];
					
				}else{//去掉选中
					vm.param.settlementlist=[];
				}
				
			},
			/**选择时间变化 */
			timeChange(){
				//午餐
				if(this.mealsType==1){
					vm.param.settlementlist[0].quantity=this.oneMonthDays*this.selectMonth.length;//购买数量
					vm.param.settlementlist[0].totalmoney=vm.param.settlementlist[0].salesPrice*vm.param.settlementlist[0].quantity;//合计金额
					vm.param.settlementlist[0].amountReceivable=vm.param.settlementlist[0].totalmoney;//应收金额
				}
				//晚餐
				else{
					let dateList=[];
					vm.selectMonth.forEach(t=>{
						let str=t[0]+'-'+(t[1]<10?'0'+t[1]:t[1]);
						dateList.push(str);
					});
					api.getStudentMakeUpForMeals({
						studentId:vm.param.student.studentId,
						mealsId:vm.param.settlementlist[0].mealsId,
						dateList:dateList
					}).then(function(data){
						if(data.resultCode==2000){
							vm.param.settlementlist[0].totalmoney=0;
							vm.param.settlementlist[0].quantity=0;
							vm.param.settlementlist[0].dinnerList=[];
							data.info.dateList.forEach(row=>{
								vm.param.settlementlist[0].totalmoney+=row.payMoney;
								vm.param.settlementlist[0].quantity+=row.mealsNum;
								// if(row.mealsNum>0)
									vm.param.settlementlist[0].dinnerList.push(row);
							});
							vm.param.settlementlist[0].amountReceivable=vm.param.settlementlist[0].totalmoney;//应收金额
						}
					});
				}

			},
			/**
			 * 删除选中餐费项
			 */
			deletesettle(li){
				for(let i=0;i<vm.param.datameallist.length;i++){
					vm.param.datameallist[i].ischeck = false;
				}
				vm.param.settlementlist=[];
				vm.selectMonth=[];
			},
			/**刷新办理中心最新收退列表 */
			updateProcessCenterMoneyList(){
				this.$emit('update');
			}
		},
		computed:{
			
			sumMoney:function(){
				
				let list = vm.param.settlementlist;
				let num = 0;
				for(let i =0;i<list.length;i++){
					
					num+= list[i].totalmoney;
					
				}
				return num;
			},
		},
		mounted(){
			
			vm = this;
		}
		
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	 .mealfee{
	 	width:10rem !important;
		border-radius: .1rem !important;	
		margin-top:8vh !important;
	 }
	.mealfeedialog{
		z-index: 29 !important;
        top: 0.81rem !important;
        left: 2.1rem !important;
        background-color:rgba(0,0,0,0.5) !important;	
		.el-dialog__header{
			padding: 0px;
		}
		.el-dialog__body{
			padding: 0px !important;
		}	
		.el-dialog__footer{
			padding: .3rem;
			.footer-btn{
				width:100%;
				text-align: center;									
		   }
		}	
		
		.title{
			width:100%;
			height: 0.6rem;
			padding: 0.2rem 0.3rem;
			font-size: 0.2rem;
			font-weight: bold;
					
		}
		.content-box{
			width:100%;
			height: auto;
			padding: 0.2rem 0.3rem;
			section > .h-title{
				font-weight: bold;
				font-size: 0.16rem;
				height: 0.4rem;
				line-height: 0.4rem;
			}
			.mealfee-list{
				height: auto;
				width: 100%;
				border:1px solid #F0F0F0;
				border-radius: 0.08rem;
				table{
					border: none;
					.trbg{
						background: red;
						color: red;
					}
				}
			}
			.total-box{
				height: 0.4rem;
				width:100%;
				text-align: center;
				line-height: 0.4rem;
				font-size: 0.16rem;	
				border: 1px solid rgb(240,240,240);
				border-bottom-left-radius: 0.08rem;	
				border-bottom-right-radius: 0.08rem;	
				background-color:rgb(248,249,253);								
			}
		}
		.footer{
			width:100%;
			height: auto;
			display: inline-flex;
			justify-content: center;
			padding:0.2rem 0.3rem;
			.btnOkDisabled{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #DEDEDE;
	            color: #333333;
	            border-radius: 0.1rem;
	            cursor: not-allowed;
        	}
			.btnOk{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #3885F8;
	            color: #FFFFFF;
	            border-radius: 0.1rem;
	            cursor: pointer;
        	}
	        .btnOk:hover{
	            background: rgba(56, 133, 248, 0.8);
	        }
	        .btnCancel{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #FFFFFF;
	            border-radius: 0.1rem;
	            color: #333333;        
	            border: 0.01rem solid #C0C4CC;
	            cursor: pointer;
	          
	        }
	        .btnCancel:hover{
	            background: rgba(56,133,248,0.1)
	        }
		}
	}
</style>